<template>
  <view class="router-view uni-animation-fade" v-if="info">
    <!-- 基础信息 -->
    <view class="shop-info container border border-bottom border-bold">
      <view class="box">
        <!-- 封面 -->
        <view class="image mr-10">
          <image
            class="block bcl-default"
            :src="info.cover || defaultImage"
            v-if="isService"
          />

          <image
            class="block bcl-default"
            :src="info.shop_pic || defaultImage"
            v-else-if="type == 3"
          />

          <image
            class="block bcl-default"
            :src="info.introduce.avatar || defaultImage"
            v-else-if="type == 4"
          />
        </view>

        <!-- 信息 -->
        <view class="info box box-1 box-column box-between">
          <!-- 服务名称 -->
          <view class="fz-15 bold" v-if="isService">
            <text class="mr-5">{{ info.title }}</text>
          </view>

          <!-- 店铺名称 -->
          <view class="name box" v-else>
            <view class="hide-text-2 fz-15 bold">{{
              info.shop_name || info.user.name
            }}</view>

            <!-- 图标 -->
            <view
              class="shop-icon-list box box-center"
              v-if="info.auth && type == 4"
            >
              <!-- 银行卡 -->
              <view class="item" :class="{ active: info.auth.bank }"></view>
              <!-- 实名 -->
              <view class="item" :class="{ active: info.auth.realname }"></view>
              <!-- 邮箱 -->
              <view
                class="item"
                :class="{ active: info.email_status == 2 }"
              ></view>
              <!-- 支付宝 -->
              <view class="item" :class="{ active: info.auth.alipay }"></view>
              <!-- 会员 -->
              <view
                class="item"
                :class="{ active: info.auth.enterprise }"
              ></view>
              <!-- 会员等级 -->
              <view
                class="item"
                :style="{ 'background-image': 'url(' + info.user_logo + ')' }"
                v-if="info.user_logo"
              ></view>
            </view>

            <!-- 图标 -->
            <view class="shop-icon-list box box-center" v-else-if="type == 3">
              <!-- 银行卡 -->
              <view class="item" :class="{ active: info.bank }"></view>
              <!-- 实名 -->
              <view class="item" :class="{ active: info.realname }"></view>
              <!-- 邮箱 -->
              <view class="item" :class="{ active: info.email }"></view>
              <!-- 支付宝 -->
              <view class="item" :class="{ active: info.alipay }"></view>
              <!-- 会员 -->
              <view class="item" :class="{ active: info.isEnterprise }"></view>
              <!-- 会员等级 -->
              <view
                class="item"
                :style="{ 'background-image': 'url(' + info.user_logo + ')' }"
                v-if="info.user_logo"
              ></view>
            </view>
          </view>

          <!-- 服务金额 -->
          <view class="cl-main" v-if="isService">￥{{ info.cash }}</view>

          <!-- 标签与定位 -->
          <view class="box box-between" v-else>
            <view class="tag-list hide-text-2" v-if="type == 3">
              <text
                class="uni-tag"
                v-for="(item, index) in info.cate_name"
                :key="index"
                >{{ item }}</text
              >
            </view>

            <view class="tag-list hide-text-2" v-else-if="type == 4">
              <text
                class="uni-tag"
                v-for="(item, index) in info.skill_tag"
                :key="index"
                >{{ item.tag_name }}</text
              >
            </view>

            <view
              class="cl-second"
              style="flex-shrink: 0;"
              v-if="info.city_name || info.addr"
            >
              <text class="icon icon-location fz-14"></text>
              <text>{{ info.city_name || info.addr }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 评分 -->
      <view class="rate box box-between mt-15 fz-12 cl-second" v-if="isService">
        <view>
          <text class="cl-main mr-5">{{ info.good_comment || 0 }}</text>
          <text>综合评价</text>
        </view>
        <view>
          <text class="cl-main mr-5">{{ info.percent || 0 }}%</text>
          <text>好评率</text>
        </view>
        <view v-if="type != 4">
          <text class="cl-main mr-5">{{ info.sales_num || 0 }}</text>
          <text>购买服务</text>
        </view>
      </view>

      <!-- 评分 -->
      <view class="rate box box-between mt-15 fz-12 cl-second" v-else>
        <view>
          <text class="cl-main mr-5">{{
            info.good_comment || info.count || 0
          }}</text>
          <text>条好评</text>
        </view>
        <view>
          <text class="cl-main mr-5"
            >{{ info.good_comment_rate || info.feedbackRete || 0 }}%</text
          >
          <text>好评率</text>
        </view>
        <view v-if="type != 4">
          <text class="cl-main mr-5">{{ info.total_service || 0 }}</text>
          <text>单服务</text>
        </view>
      </view>
    </view>

    <!-- Tab展示 -->
    <uni-tab
      :tab-title="tabTitle"
      :has-active-border="true"
      @change="onTabChange"
    >
      <!-- 第一栏 -->
      <view class="container" slot="content" v-if="currentIndex == 0">
        <view
          style="overflow: auto;"
          v-html="info.introduce.introduce || '空空如也~'"
          v-if="type == 4"
        ></view>
        <view
          style="overflow: auto;"
          v-html="info.shop_desc || '空空如也~'"
          v-else-if="type == 3"
        ></view>
        <view
          style="overflow: auto;"
          v-html="info.desc || '空空如也~'"
          v-else
        ></view>
      </view>

      <!-- 第二栏 -->
      <view slot="content" v-else>
        <!-- 服务评价（服务/作品） -->
        <service-comment
          :info="info"
          :type="type"
          v-if="isService"
        ></service-comment>

        <!-- 服务列表（店铺） -->
        <service-list :info="info" v-else-if="type == 3"></service-list>

        <!-- 评价列表（个人服务商） -->
        <servicer-comment :info="info" v-else></servicer-comment>
      </view>
    </uni-tab>

    <!-- 底部栏 -->
    <view
      class="uni-footer box box-center text-center bcl-white border border-top"
      v-if="info.role != 'employer'"
    >
      <view
        class="box-1 text-center pointer"
        :class="{ 'cl-main': info.is_focus }"
        @tap="actionCollect"
      >
        <text
          class="icon icon-star"
          :class="{ 'icon-star-full cl-main': info.is_focus }"
        ></text>
        <text>{{ type == 4 ? "关注TA" : "收藏店铺" }}</text>
      </view>
      <view class="box-1 text-center pointer" @tap="toChatPage(info.uid)">
        <text class="icon icon-tel"></text>
        <text>联系TA</text>
      </view>
      <view
        class="box-1 bcl-main-new cl-white text-center pointer pointer-filter"
        :class="{ 'bcl-disabled': info.is_buy != 1 }"
        v-if="isService"
        @tap="buy(7)"
        >立即购买</view
      >
      <view
        class="box-1 bcl-main-new cl-white text-center pointer pointer-filter"
        @tap="buy(6)"
        v-else-if="type != 4"
        >立即雇佣</view
      >
    </view>
    
    <!-- 发布按钮 -->
    <div
      class="send-btn pointer"
      @click="toSendPage"
    >
      <image
        src="/static/images/release_1.png"
        style="width: 50px; height: 50px;"
      ></image>
    </div>
  </view>
</template>

<script>
import {
  infoService,
  infoShop,
  infoServicer,
  collect,
  uncollect,
  focus,
  unfocus,
  buyGoods,
} from "@/apis/service";

import uniTab from "@/components/tab";
import uniCommentItem from "@/components/commentItem";
import serviceList from "./components/serviceList";
import serviceComment from "./components/serviceComment";
import servicerComment from "./components/servicerComment";

export default {
  data() {
    return {
      id: "",
      info: null,

      navigationBarTitles: {
        1: "作品详情",
        2: "服务详情",
        3: "店铺详情",
        4: "个人服务商详情",
      },

      type: 1,
      currentIndex: 0,
      defaultImage: this.$config.default,
    };
  },

  onLoad(options) {
    let { id, type } = options;

    this.id = id;
    this.type = type;

    // 修改页面标题
    uni.setNavigationBarTitle({
      title: this.navigationBarTitles[this.type],
    });

    this.infoData(); // 获取详情数据
  },

  onShow() {
    this.infoData();
  },

  onReachBottom() {
    uni.$emit("reachBottom");
  },

  methods: {
    
    
    toSendPage() {
      
      let url = uni.getStorageSync("userInfo")
      if(url){
          uni.navigateTo({
            url:'/pages/index/release/submit?type=1'
          });

      }else{
        
          uni.navigateTo({
            url:'/user/login'
          });
      }
    },
    /**
     * 获取详情数据
     */
    async infoData() {
      let params = {};

      // 参数
      if (this.type != 3) {
        params.id = this.id;
      } else {
        params.shop_id = this.id;
      }

      // 请求接口
      let { code, data } = this.isService
        ? await infoService({
            ...params,
            type: this.type,
          })
        : this.type == 3
        ? await infoShop(params)
        : await infoServicer(params);

      if (code == 200) this.info = data;
    },

    /**
     * 收藏/取消收藏
     */
    async collect() {
      let isCollect = this.info.is_focus;

      let params = {
        shop_id: this.isService ? this.info.shop_id : this.id,
      };

      let { code, data } =
        isCollect == 0 ? await collect(params) : await uncollect(params);

      if (code == 200) this.info.is_focus = !isCollect;
    },

    /**
     * 关注/取消关注
     */
    async focus() {
      let isFocus = this.info.is_focus;

      let params = {
        id: this.id,
      };

      let { code, data } =
        isFocus == 0 ? await focus(params) : await unfocus(params);

      if (code == 200) this.info.is_focus = !isFocus;
    },

    /**
     * 收藏/关注分发
     */
    actionCollect() {
      if (!uni.getStorageSync("userInfo")) {
        uni.navigateTo({
          url: "/user/login",
        });
      } else {
        if (this.type == 4) {
          this.focus();
        } else {
          this.collect();
        }
      }
    },

    /**
     * 购买
     */
    async buy(type) {
      if (!uni.getStorageSync("userInfo")) {
        uni.navigateTo({
          url: "/user/login",
        });
      } else {
        if (this.isService && this.info.is_buy != 1) return false;

        let url = "";

        // 购买作品
        if (this.type == 1) {
          let params = {
            goods_id: this.info.id,
          };

          let { code, data } = await buyGoods(params);

          if (code == 200)
            url = `/pay/pay?type=5&orderId=${data.order_id}&goodsName=${this.info.title}`;
        } else if (this.type == 2) {
          // 购买服务
          url = `/pages/index/modify?type=${type}&employeeId=${
            this.info.uid
          }&serviceId=${this.info.id}&serviceTitle=${
            this.info.title
          }&serviceMoney=${Number(this.info.cash)}`;
        } else {
          // 立即雇佣
          url = `/pages/index/modify?type=${type}&employeeId=${this.info.uid}`;
        }

        uni.navigateTo({
          url,
        });
      }
    },

    onTabChange(chunk) {
      this.currentIndex = chunk.index;
    },
  },

  computed: {
    isService() {
      return this.type <= 2;
    },

    tabTitle() {
      let serviceTitle = this.type == 1 ? "作品" : "服务";

      return this.isService
        ? [`${serviceTitle}描述`, `${serviceTitle}评价`]
        : this.type == 3
        ? ["店铺简介", `主营服务(${this.info.service_num})`]
        : ["个人简介", "评价列表"];
    },
  },

  components: {
    uniTab,
    uniCommentItem,
    serviceList,
    serviceComment,
    servicerComment,
  },
};
</script>

<style lang="scss" scoped>
.router-view {
  padding-bottom: 120upx;

  // 基础信息
  .shop-info {
    .image {
      image {
        width: 120upx;
        height: 120upx;
      }
    }
  }
}
</style>
